<!DOCTYPE html>
<html>
<head>
    <title>{$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head"/>
    <link href="__TMPL__/public/assets/css/slippry/slippry.css" rel="stylesheet">
    <style>
        .caption-wraper {
            position: absolute;
            left: 50%;
            bottom: 2em;
        }

        .caption-wraper .caption {
            position: relative;
            left: -50%;
            background-color: rgba(0, 0, 0, 0.54);
            padding: 0.4em 1em;
            color: #fff;
            -webkit-border-radius: 1.2em;
            -moz-border-radius: 1.2em;
            -ms-border-radius: 1.2em;
            -o-border-radius: 1.2em;
            border-radius: 1.2em;
        }

        .tc-gridbox {
            margin: 0;
        }

        @media (max-width: 767px) {
            .caption-wraper {
                left: 0;
                bottom: 0.4em;
            }

            .caption-wraper .caption {
                left: 0;
                padding: 0.2em 0.4em;
                font-size: 0.92em;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                border-radius: 0;
            }
        }

        .niao {
            position: absolute;
            height: 150px;
            animation: na 2s infinite;
            top: 100px;
            left: 200px;
        }

        @keyframes na {
            0% {
                opacity: 0.2;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.2;
            }
        }

    </style>
    <hook name="before_head_end"/>
</head>
<body class="body-white" style="position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top:0;
">

<include file="public@navTop"/>
<img src="__TMPL__/public/assets/images/niao.png" class="niao">

<a href="/swim.html" target="_self">
    <div class="yuan" style="top: 50%;
    left: 16%;">
        <div class="text">
            <div class="text-kids">
                <img src="__TMPL__/public/assets/images/kids.png">
            </div>
            <div class="text-t">
                游泳俱乐部
            </div>
        </div>
        <img src="__TMPL__/public/assets/images/jian.png" class="jian" style="animation-delay: 0.1s;">
    </div>
</a>
<a href="/kindergarten.html" target="_self">
    <div class="yuan" style="top: 33%;animation-delay: 0.5s;
    left: 33%;">
        <div class="text">
            <div class="text-kids">
                <img src="__TMPL__/public/assets/images/kids.png">
            </div>
            <div class="text-t">
                国际幼儿园
            </div>
        </div>
        <img src="__TMPL__/public/assets/images/jian.png" class="jian" style="animation-delay: 0.3s;">

    </div>
</a>
<a href="/parentchild.html" target="_self">

    <div class="yuan" style="top: 40%;animation-delay: 1s;
    left: 44%;">
        <div class="text">
            <div class="text-kids">
                <img src="__TMPL__/public/assets/images/kids.png">
            </div>
            <div class="text-t">
                亲子中心
            </div>
        </div>
        <img src="__TMPL__/public/assets/images/jian.png" class="jian" style="animation-delay: 0.5s;">
    </div>
</a>
<a href="/skate.html" target="_self">
    <div class="yuan" style="top: 35%;animation-delay: 1.5s;
    left: 65%;">
        <div class="text">
            <div class="text-kids">
                <img src="__TMPL__/public/assets/images/kids.png">
            </div>
            <div class="text-t" style="font-size: 20px">
                冰上运动中心
            </div>
        </div>
        <img src="__TMPL__/public/assets/images/jian.png" class="jian" style="animation-delay: 0.7s;">
    </div>
</a>
<div style="height:100%;background: url('__TMPL__/public/assets/images/index_bg.jpg') no-repeat center;
    background-size: 100% 100%;">

</div>
<include file="public@footer"/>
<!-- /container -->
<include file="public@scripts"/>
<script src="__TMPL__/public/assets/js/slippry.min.js"></script>
<script>
    $(function () {
        $(".list-unstyled").slippry({
            transition: 'fade',
            useCSS: true,
            captions: false,
            speed: 1000,
            pause: 2000,
            auto: true,
            preload: 'visible',
            controls: false,
            adaptiveHeight: false,
            page: false
        });
        $(".list-unstyled").show();

//        $(".yuan").mousemove(function (e) {
//            $(this).find(".text").css("animation-name", "textAn")
//        })
//        $(".yuan").mouseleave(function (e) {
//            $(this).find(".text").css("animation-name", "textOutAn")
//        })

        $("body").mousemove(function (e) {
            $(".text").css("animation-name", "textInAn")
            $(".jian").fadeIn()
            $("#footer").css("animation-name", "footerInAn")
            $("#topNav").css("animation-name", "topNavInAn")
        })
        $("body").mouseleave(function (e) {
            $(".jian").fadeOut()
            $(".text").css("animation-name", "textOutAn")
            $("#footer").css("animation-name", "footerOutAn")
            $("#topNav").css("animation-name", "topNavOutAn")
        })
    });
</script>
<hook name="before_body_end"/>
</body>
</html>
